<template>
    <div>
        <div class="swiper-top">
            <swiper :options="swiperOption">
                <swiper-slide class="img" v-for="item in 3" :key="item">
                    <img src="../../../public/images/swiper.png" width="100%" alt="">
                    </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
        <div class="content">
            <Row :gutter="16">
                <Col span="12">
                    <div class="content-item">
                        <div class="content-item-title">
                            <p>最新测评活动</p>
                            <span>更多</span>
                        </div>
                        <div class="content-list">
                            <div class="data-item" v-for="item in 5" :key="item">
                                <span class="title">测评{{ item }}</span>
                                <span>{{ parseInt( Math.random()*1000) }}人作答</span>
                                <span style="padding-left:10px">{{ parseInt( Math.random()*1000) }}人完成</span>
                                <span style="float:right">创建时间：2020年1月12日</span>
                            </div>
                        </div>
                    </div>
                </Col>
                <Col span="12">
                    <div class="content-item">
                        <div class="content-item-title">
                            <p>最新测评活动</p>
                            <span>更多</span>
                        </div>
                        <div class="step-list">
                            <div class="step-item">
                                <span class="xuhao xu1"></span>
                                <router-link :to="{'name':'addItem'}">新建测评项目</router-link>
                                <span class="icon xu1"></span>
                            </div>
                            <div class="step-item">
                                <span class="xuhao xu2"></span>
                                <router-link :to="{'name':'Candidate'}">导入候选人</router-link>
                                <span class="icon xu2"></span>
                            </div>
                            <div class="step-item">
                                <span class="xuhao xu3"></span>
                                <span>查看报告</span>
                                <span class="icon xu3"></span>
                            </div>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
    components: { swiper, swiperSlide },
    data() {
        
        return {
            swiperOption: {
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true // 允许点击小圆点跳转
                },

                centeredSlides: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false // 手动切换之后继续自动轮播
                },
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                }
            }
        };
    },
    mounted() {}
};
</script>

<style lang="scss" scoped>
@import "../../../node_modules/swiper/swiper.scss";

.xuhao {
    width: 40px;
    height: 40px;
    float: left;
    
    &.xu1 {
        background: url("../../../public/images/icon/1.png");
        background-size: cover;
    }
    &.xu2 {
        background: url("../../../public/images/icon/2.png");
        background-size: cover;
    }
    &.xu3 {
        background: url("../../../public/images/icon/3.png");
        background-size: cover;
    }
}
.icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    float: right;
    &.xu1 {
        background: url("../../../public/images/icon/11.png");
        background-size: cover;
    }
    &.xu2 {
        background: url("../../../public/images/icon/22.png");
        background-size: cover;
    }
    &.xu3 {
        background: url("../../../public/images/icon/33.png");
        background-size: cover;
    }
}
.swiper-top {
    // height: 300px
    
    margin: 20px;
    
}
.content {
    margin: 0 20px;
    .content-item {
        // box-shadow: 1px 1px 2px rgba(39, 37, 37, 10%);
        border: 1px solid rgba(49, 49, 49, 0.2);

        .content-item-title {
            height: 60px;
            background: #5fadfc;
            line-height: 60px;
            text-align: center;
            position: relative;
            border-radius: 4px;
            color: #fff;
            span {
                display: inline-block;
                height: 60px;
                position: absolute;
                top: 0;
                right: 10px;
                cursor: pointer;
            }
        }
        .content-list {

            .data-item {
                padding: 0 20px;
                box-sizing: border-box;
                line-height: 40px;
                .title {
                    color: #2d8cf0;
                    font-size: 20px;
                    display: inline-block;
                    margin-right: 30px;
                }
            }
        }
        .step-list {
            transform: translate(0px, -3px);    
            padding-top: 10px;
            padding-bottom: 10px;
            .step-item {
                text-align: center;
                overflow: hidden;
                padding: 0 20px;
                line-height: 40px;
                height: 55px;
                margin: 8px 0px;
                background: white;
            }
        }
    }
}
</style>
